<template>
	<div class="endLive">
		<div class="endLiveCont">
			<div class="bjImg">
				<image src="@/static/image/userBj.png" mode="" class=""></image>
			</div>

			<div class="endLiveCenter">
				<div class="endLiveCont_back">
					<div class="endLiveCont_back_lable">
						<!-- <image src="@/static/image/left.png" mode="" class="endLiveCont_back_img"></image>
						<span>推广员</span> -->
							<u-navbar leftText="推广员" @leftClick="appFinish"  leftIconColor="#1D2129"  bgColor="transparent">
							
			               </u-navbar>
						<div class="lableRight">公测</div>
					

						
					</div>
			

					<div class="useLable">
						<u-switch v-model="switchValue" @change="changeSwitch" activeColor="#295EFF"></u-switch>
					</div>
				</div>

			</div>
		</div>

		<div class="scrollViewTop">
			<div class="userData">
				<!-- <div class="userData_top">
					观众总数量：{{ AudienceCount.allAudienceCount }}
				</div> -->
				<div class="userData_cont">
					<div class="userData_cont_items">
						<div class="userData_cont_items_top">
							{{ AudienceCount.todayOrderNum}}
						</div>
						<div class="userData_cont_items_bottom">
							今日有效订单
						</div>
					</div>
					<div class="userData_cont_items">
						<div class="userData_cont_items_top">
							{{ AudienceCount.totalOrderNum }}
						</div>
						<div class="userData_cont_items_bottom">
							累计有效订单数
						</div>
					</div>
					<div class="userData_cont_items noTop">
						<div class="userData_cont_items_top">
							{{ AudienceCount.todayOrderAmount}}
						</div>
						<div class="userData_cont_items_bottom">
							今日有效订单金额
						</div>
					</div>
					<div class="userData_cont_items noTop">
						<div class="userData_cont_items_top">
							{{ AudienceCount.totalOrderAmount}}
						</div>
						<div class="userData_cont_items_bottom">
							累计有效订单金额
						</div>
					</div>
				</div>
			</div>

			<div class="prizeDraw_top_search">
				<!-- arrow-down-fill  -->
				<div class="prizeDraw_top_search_top" @click='isUserDown=!isUserDown'>
					<div class="prizeDraw_top_search_top_title" v-if="userDownIndex == 0">推广员昵称</div>
					<div class="prizeDraw_top_search_top_title" v-if="userDownIndex == 1">推广员姓名</div>
					<div class="prizeDraw_top_search_top_title" v-if="userDownIndex == 2">推广员手机号</div>
					<div class="prizeDraw_top_search_top_title" v-if="userDownIndex == 3">邀请人</div>
					<u-icon name="arrow-down-fill" color="#A9A9A9" size="8" v-if="!isUserDown"></u-icon>
					<u-icon name="arrow-up-fill" color="#A9A9A9" size="8" v-else></u-icon>
				</div>

				<div class="prizeDraw_top_title">
					<input type="text" :placeholder="isUserLableDown?'':userDownPlace" v-model="params.nickname"
						placeholder-class="zj-placeholder-class" :disabled="userDownDisabled"
						@search='userLableDownSearch' @confirm='userLableDownSearch' v-if="userDownIndex == 0">
					<input type="text" :placeholder="isUserLableDown?'':userDownPlace" v-model="params.name"
						placeholder-class="zj-placeholder-class" :disabled="userDownDisabled"
						@search='userLableDownSearch' @confirm='userLableDownSearch' v-if="userDownIndex == 1">
					<input type="text" :placeholder="isUserLableDown?'':userDownPlace" v-model="params.mobile"
						placeholder-class="zj-placeholder-class" :disabled="userDownDisabled"
						@search='userLableDownSearch' @confirm='userLableDownSearch' v-if="userDownIndex == 2">
					<input type="text" :placeholder="isUserLableDown?'':userDownPlace" v-model="params.inviterName"
						placeholder-class="zj-placeholder-class" :disabled="userDownDisabled"
						@search='userLableDownSearch' @confirm='userLableDownSearch' v-if="userDownIndex == 3">
					<!-- <div class="prizeDraw_top_icon">
						<u-icon name="arrow-down" color="#A9A9A9" size="14" v-if="!isUserLableDown"></u-icon>
						<u-icon name="arrow-up" color="#A9A9A9" size="14" v-else></u-icon>
					</div> -->
					<!-- 
					<div class="prizeDraw_top_cont" v-if='userDownIndex == 2' @click="userDownDisabledEvent">
						<span v-if="closeLableList.length <=0">
							{{userDownPlace}}
						</span>
						<div class="prizeDraw_top_cont_items" v-for="(ite,idx) in closeLableList" :key="idx" v-else>
							<div class="prizeDraw_top_cont_items_name">
								{{ite}}
							</div>
							<div class="prizeDraw_top_cont_items_name_icon" @click.stop='closeItems(ite,idx)'>
								<u-icon name="close" color="#0D0D0D" size="10"></u-icon>
							</div>
						</div>
					</div> -->
					<div class="inputSeach" @click='couponEvent()'>
						<image src="@/static/image/sousuo.png" mode=""></image>
					</div>

				</div>
				<!-- 	<div class="inputSeachText">
					搜索
				</div> -->
			</div>
			<!--  -->
			<div class="u-tabs-box">
				<u-tabs :list="userTabList" lineWidth="26" lineHeight="2" lineColor="#295FFF" :activeStyle="{
			         color: '#295FFF',
			         fontWeight: 'bold',
			         transform: 'scale(1.05)'
			     }" :inactiveStyle="{
			         color: '#8F969E',
			         transform: 'scale(1)'
			     }" @change='tabChange'>
				</u-tabs>
			</div>
		</div>
		<!-- lable -->
		<div class="u-tabs-box-down" v-if="isUserDown">
			<div :class="userDownIndex == idx ? 'u-tabs-box-down-items u-tabs-box-down-items-act':'u-tabs-box-down-items'"
				v-for="(ite,idx) in userDownList" :key="idx" @click.stop='closeUserDown(ite,idx)'>
				{{ite.name}}
			</div>
		</div>
		<!-- 标签 -->
		<div class="userLableDown" v-if="isUserLableDown">
			<u-checkbox-group v-model="TagName" placement="column" @change="checkboxChange">
				<div class="userLableDownBox">
					<u-checkbox :customStyle="{marginBottom: '16px'}" v-for="(item, index) in TagList" :key="index"
						:label="item.name" :name="item.tagId">
					</u-checkbox>
				</div>
			</u-checkbox-group>
			<div class="userLableDown_btn" @click='userLableDownSearch'>
				搜索
			</div>
		</div>
		<scroll-view @scrolltolower="scrolltolower" class="scrollView" :scroll-y="true" :scroll-with-animation="true">
			<div class="liveUserItems" v-for="(ite,idx) in promoteApplyList" :key="idx">
				<div class="liveUserItems_top">
					<div class="liveUserItems_top_left">
						<u-avatar  :src="ite.avatar" mode=""></u-avatar>
					</div>
					<div class="liveUserItems_top_right">
						<div class="liveUserItems_top_right_title ">
							<div class="liveUserItems_top_right_title_top ex">
								{{ite.nickname || '游客'}}
							</div>

							<div class="liveUserItems_top_right_title_bottom ex">
								{{ite.levelName || '-'}}
							</div>
						</div>
						<div v-if='dataType == 1'>
							<div class="liveUserItems_top_right_lable" v-if='ite.status == 1'>
								正常
							</div>
							<div class="liveUserItems_top_right_lable_act" v-else>
								已清退
							</div>
							<div class="liveUserItems_top_right_price" @click='eitExtenEvent(ite)'>
								{{ite.status == 1?'清退':'恢复'}}
							</div>
						</div>


					</div>
				</div>
				<div class="liveUserItems_top_right_time">
					<div>
						姓名：{{ite.name}}
					</div>
					<div class="liveUserItems_top_right_time_div">
						邀请人：<div class="liveUserItems_top_right_time_ex ex">{{ite.inviterName || '-'}}</div>
					</div>
					<div>
						手机号码：{{ite.mobile || '-'}}
					</div>
				</div>
				<!-- itemdata -->
				<div class="liveUserItems_bottom_data" v-if="dataType == 1">
					<div class="liveUserItems_bottom_data_items">
						<div class="liveUserItems_bottom_data_items_top">
							{{ite.totalCustomerNum}}
						</div>
						<div class="liveUserItems_bottom_data_items_bottom">
							累计客户 (人)
						</div>
					</div>
					<div class="liveUserItems_bottom_data_items">
						<div class="liveUserItems_bottom_data_items_top">
							{{ite.totalInviteNum}}
						</div>
						<div class="liveUserItems_bottom_data_items_bottom">
							累计邀请 (人)
						</div>
					</div>
					<div class="liveUserItems_bottom_data_items">
						<div class="liveUserItems_bottom_data_items_top">
							{{ `¥${(ite.commissionSettled / 100).toFixed(2)}` }}
						</div>
						<div class="liveUserItems_bottom_data_items_bottom">
							已结算佣金 (元)
						</div>
					</div>
					<div class="liveUserItems_bottom_data_items">
						<div class="liveUserItems_bottom_data_items_top">
							{{ `¥${(ite.commissionFreeze / 100).toFixed(2)}` }}
						</div>
						<div class="liveUserItems_bottom_data_items_bottom">
							待结算佣金 (元)
						</div>
					</div>
				</div>
				<div class="liveUserItems_bottom_btn" v-else>
					<div class="liveUserItems_bottom_btn_one" @click='setPromoteApplyCheck(ite,1)'>
						拒绝
					</div>
					<div class="liveUserItems_bottom_btn_two" @click='setPromoteApplyCheck(ite,2)'>
						通过
					</div>
				</div>
			</div>
			<div class="listSpace" v-if="promoteApplyList.length <= 0 && loading">
				<list-space></list-space>
			</div>
			<div class="zj_space">

			</div>
		</scroll-view>
		<!-- 贴标签弹窗 -->
		<lables :selectArr='TagList' v-if='isLablesShow' popTitle='选择标签' @closePop='closePop' @confirmPop='confirmPop'>
		</lables>
		<!-- 封禁弹窗 -->
		<toastMask toaskTitle='提示' @toastClose='toastClose' v-if="isToastShow" :toaskUserInfo="toaskUserInfo"
			:EitStatus='EitStatus' @toastIndustry='toastIndustry'></toastMask>
	</div>
</template>

<script>
	import lables from './components/lable.vue'
	import toastMask from './components/toastMask.vue'
	export default {
		components: {
			lables,
			toastMask
		},
		filters: {
			formatDate(v) {
				if (v == 0) {
					return '-'
				}
				const value = v * 1000
				const data = new Date(value);
				const month = data.getMonth() + 1;
				const day = data.getDate();
				const year = data.getFullYear();
				const hours = data.getHours();
				const minutes = data.getMinutes();
				const seconds = data.getSeconds();
				const formattedTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
				return formattedTime;
			},
			formatTime(v) {
				if (v == 0) {
					return '-'
				}
				let hours = Math.floor(v / 3600);
				let minutes = Math.floor((v % 3600) / 60);
				let seconds = v % 60;
				const formattedTime = `${hours}:${minutes}:${seconds}`;
				return formattedTime;
			},
			amountFilter(v) {
				if (!v) return '-'
				return Number(v) / 100
			},
		},
		data() {
			return {
				params: {
					nickname: "",
					page: 1,
					pageSize: 10,
					mobile: ""
				},
				dataType: "1",
				promoteApplyList: [],
				AudienceCount: [], //观众数据
				total: 0,
				loading: false,
				isUserDown: false,
				userDownList: [{
						name: '推广员昵称',
						status: 'all'
					},
					{
						name: '推广员姓名',
						status: 'all'
					},
					{
						name: '推广员手机号',
						status: 'all'
					},
					{
						name: '邀请人',
						status: 'all'
					}
				],
				userDownIndex: 0,
				userDownPlace: "请输入推广员昵称",
				TagList: [],
				userDownDisabled: false,
				isUserLableDown: false,
				checkboxList1: [{
						name: '苹果',
						disabled: false
					},
					{
						name: '香蕉',
						disabled: false
					},
					{
						name: '橙子',
						disabled: false
					}
				],
				TagName: [],
				userTabList: [{
					name: '推广员列表',
					status: '1'
				}, {
					name: '推广员审核',
					status: '2'

				}],
				closeLableList: [], //选择lable
				isLablesShow: false, //标签弹窗
				userId: '',
				isToastShow: false, //是否关闭
				toaskUserInfo: '', //用户信息
				userBlockStatus: '',
				EitStatus: 1, //1清退2封禁
				EitFrom: {
					promoterIds: [],
					status: 1
				},
				switchValue: false
			}
		},
		onPullDownRefresh() {
			this.params.page = 1
			this.promoteApplyList = []
			this.loading = false
			this.getPromoterList()
		},
		onLoad(opt) {
			if (opt.liveId) {
				this.params.liveId = opt.liveId
			}
			this.getPromoterList()
			this.getAudienceCountFun()
			this.getSwitch()
		},
		methods: {
			appFinish() {
				this.$utils.appFinish(this)
			},
			// switch
			async changeSwitch(e) {
				const switchParams = {
					isOpen: this.switchValue ? 1 : 0
				}
				const {
					data
				} = await this.$request(this.$Api.promoteSwitch, switchParams, "post")
				if (data.code != 200) return
				uni.showToast({
					title: '操作成功',
					icon: 'none'
				})
				console.log(this.switchValue)
			},
			// 查看是否打开关闭状态
			async getSwitch() {
				const {
					data
				} = await this.$request(this.$Api.promoteRecruitDetail, {}, "get")
				if (data.code != 200) return
				this.switchValue = data.data.isOpen == 1 ? true : false
			},
			// 清退or恢复
			eitExtenEvent(ite) {
				this.EitFrom.promoterIds = [ite.promoterId]
				this.EitStatus = this.EitFrom.status = ite.status
				this.isToastShow = true
			},
			// 点击搜索
			userLableDownSearch() {
				this.params.page = 1
				this.promoteApplyList = []
				this.loading = false
				this.isUserDown = false
				this.isUserLableDown = false
				this.getPromoterList()
			},
			// 关闭标签
			closeItems(ite, idx) {
				this.closeLableList.splice(idx, 1)
				if (!this.isUserLableDown) this.isUserLableDown = true
				this.TagName.splice(idx, 1)
			},
			userDownDisabledEvent() {
				if (this.userDownIndex == 2) {
					this.isUserLableDown = !this.isUserLableDown
					this.isUserDown = false
				}
			},
			// 查看详情
			userDetailEvnet(ite) {
				uni.navigateTo({
					url: '/pages/userList/userDetail' + "?customerId=" + ite.customerId
				})
			},
			// 
			checkboxChange(e) {
				console.log(e, this.TagName)
				// 整合选中类别
				this.params.tagIds = e
				this.zhChangeList()
			},
			zhChangeList() {
				var arr = []
				for (var i in this.TagList) {
					for (var k in this.params.tagIds) {
						if (this.TagList[i].tagId == this.params.tagIds[k]) {
							arr.push(this.TagList[i].name)
						}
					}
				}
				this.closeLableList = arr
			},
			// 选择搜索属性
			closeUserDown(ite, idx) {
				this.isUserDown = false
				this.isUserLableDown = false
				this.userDownIndex = idx
				if (idx == 0) {
					this.userDownPlace = '请输入推广员昵称'
					this.userDownDisabled = false
				} else if (idx == 1) {
					this.userDownPlace = '请输入推广员姓名'
					this.userDownDisabled = false
				} else if (idx == 2) {
					this.userDownPlace = '请输入推广员手机号'
					this.userDownDisabled = false
				} else if (idx == 3) {
					this.userDownPlace = '请输入邀请人'
					this.userDownDisabled = false
				}
				this.params = {
					nickname: "",
					page: 1,
					pageSize: 10,
					mobile: ""
				}
				this.promoteApplyList = []
				this.loading = false
				this.getPromoterList()
			},
			tabChange(e) {
				this.dataType = e.status
				this.params = {
					nickname: "",
					page: 1,
					pageSize: 10,
					mobile: ""
				}
				this.promoteApplyList = []
				this.loading = false
				this.getPromoterList()
				console.log('tabChangetabChange', e)
			},
			couponEvent() {
				this.$utils.throttle((res) => {
					this.params.page = 1
					this.promoteApplyList = []
					this.loading = false
					this.getPromoterList()
				}, 800)
			},
			// 点击确定后，该活动将在 10s 后自动开奖，是否要提前开奖？
			scrolltolower(e) {
				if (this.promoteApplyList.length < this.total) {
					this.params.page++
					this.getPromoterList()
				} else {
					uni.showToast({
						title: '已到底',
						icon: 'none'
					})
				}
				console.log('e.detail.scrollTop', e.detail.scrollTop)
			},
			// 获取推广员数据
			async getAudienceCountFun() {
				const {
					data
				} = await this.$request(this.$Api.promoteOverview, {}, "get")
				this.loading = true
				if (!data.data) return
				if (data.data) {
					data.data.todayOrderAmount = (data.data.todayOrderAmount / 100).toFixed(2);
					data.data.totalOrderAmount = (data.data.totalOrderAmount / 100).toFixed(2);
				}
				this.AudienceCount = data.data
				this.total = data.total
				uni.stopPullDownRefresh()
			},
			getPromoterList() {
				if (this.dataType == 1) {
					this.getPromoterLists()
				} else {
					this.getPromoteApplyList()
				}
			},
			// 获取推广员工列表
			async getPromoterLists() {
				const {
					data
				} = await this.$request(this.$Api.promoterList, this.params, "get")
				this.loading = true
				if (!data.data) return
				this.promoteApplyList = this.promoteApplyList.concat(data.data.list)
				this.total = data.data.total
				uni.stopPullDownRefresh()
			},
			// 获取待审核列表
			async getPromoteApplyList() {
				const {
					data
				} = await this.$request(this.$Api.promoteApplyList, this.params, "get")
				this.loading = true
				if (!data.data) return
				this.promoteApplyList = this.promoteApplyList.concat(data.data.list)
				this.total = data.data.total
				uni.stopPullDownRefresh()
			},
			backBtn() {
				uni.navigateBack()
			},
			// 选中用户贴标签
			addLabel(ite) {
				// 判断用户已经选中的标签
				const arr = []
				this.userId = ite.customerId
				for (var i in this.TagList) {
					this.TagList[i].status = false
					for (var k in ite.tagNames) {
						if (ite.tagNames[k].tagId == this.TagList[i].tagId) {
							arr.push(i)
						}
					}
				}
				for (var i in arr) {
					this.TagList[arr[i]].status = true
				}
				this.isLablesShow = true
			},
			closePop() {
				this.isLablesShow = false
			},
			toastClose() {
				this.isToastShow = false
			},
			async confirmPop(ite) {
				const {
					data
				} = await this.$request(this.$Api.tagCreat, {
					tagIds: ite,
					tagType: 1,
					userId: this.userId,
				}, "post")
				if (data.code != 200) return
				uni.showToast({
					title: '操作成功',
					icon: 'none'
				})
				this.isLablesShow = false
				this.params.page = 1
				this.promoteApplyList = []
				this.loading = false
				this.getPromoterList()
			},
			// 确认清退
			async toastIndustry() {
				this.EitFrom.status == 1 ? this.EitFrom.status = 0 : this.EitFrom.status = 1
				const {
					data
				} = await this.$request(this.$Api.promoterStatusUpdate, this.EitFrom, "post")
				if (data.code != 200) return
				uni.showToast({
					title: '操作成功',
					icon: 'none'
				})
				this.isToastShow = false
				this.params.page = 1
				this.promoteApplyList = []
				this.loading = false
				this.getPromoterList()
			},
			// 通过or拒绝
			async setPromoteApplyCheck(ite, status) {
				console.log('[ite.promoteApplyId]', [ite.promoteApplyId], status)
				const {
					data
				} = await this.$request(this.$Api.promoteApplyCheck, {
					promoteApplyIds: [ite.promoteApplyId],
					status: status
				}, "post")
				if (data.code != 200) return
				uni.showToast({
					title: '操作成功',
					icon: 'none'
				})
				this.isToastShow = false
				this.params.page = 1
				this.promoteApplyList = []
				this.loading = false
				this.getPromoterList()
			},

		}
	}
</script>

<style lang="scss">
	.endLive {
		width: 100%;
		height: 100vh;
		padding: 0 !important;
		margin: 0 !important;
		overflow: hidden;
		background: #FAFBFF !important;
	}

	::v-deep .u-tabs__wrapper__nav__line {
		// transform: translate(10px) !important;
	}

	.prizeDraw_top_search {
		display: flex;
		align-items: center;
		margin-top: 34rpx;

		.inputSeachText {
			width: 90rpx;
			height: 48rpx;
			background: #295FFF;
			border-radius: 8rpx;
			color: #fff;
			text-align: center;
			margin-left: 50rpx;
			font-size: 24rpx;
			line-height: 48rpx;
		}

		.prizeDraw_top_search_top {
			width: 175rpx;
			display: flex;
			align-items: center;
			font-size: 28rpx;
			float: right;

			.prizeDraw_top_search_top_title {
				min-width: 165rpx;
			}

			span {
				margin-right: 6rpx;
			}
		}

		.prizeDraw_top_title {
			font-size: 28rpx;
			color: #464C5B;
			text-align: left;
			font-weight: 500;
			line-height: 64rpx;
			padding: 0 32rpx;
			box-sizing: border-box;
			position: relative;
			padding-bottom: 32rpx;
			width: 482rpx;
			height: 64rpx;
			border-radius: 32rpx;
			position: relative;

			input {
				width: 482rpx;
				height: 64rpx;
				border-radius: 32rpx;
				padding: 0 24rpx 0 74rpx;
				border: 1rpx solid #D7DDE4;
				box-sizing: border-box;
				font-size: 24rpx;

			}

			.inputSeach {
				width: 32rpx;
				height: 32rpx;
				position: absolute;
				left: 54rpx;
				top: 6rpx;
			}

			.prizeDraw_top_icon {
				position: absolute;
				right: 0rpx;
				top: 20rpx;
			}

			.prizeDraw_top_cont {
				width: 482rpx;
				position: absolute;
				left: 32;
				top: 0;
				height: 100%;
				display: flex;
				overflow: hidden;
				padding: 8rpx 44rpx 8rpx 24rpx;
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				border: 1rpx solid #D7DDE4;
				border-radius: 32rpx;

				span {
					color: #BFBFBF !important;
					font-size: 28rpx !important;
					line-height: 44rpx;
				}

				// background: red;

				.prizeDraw_top_cont_items {
					min-width: 50rpx;
					height: 48rpx;
					background: #E8EEFA;
					border-radius: 4rpx;
					padding: 0 64rpx 0 16rpx;
					position: relative;
					line-height: 48rpx;
					margin-bottom: 50rpx;
					margin-right: 12rpx;

					.prizeDraw_top_cont_items_name {}

					.prizeDraw_top_cont_items_name_icon {
						position: absolute;
						right: 24rpx;
						top: 12rpx;
						font-weight: bold;
					}
				}
			}

		}

	}

	.u-tabs-box {
		padding-top: 18rpx;
		width: 100vw;
		position: relative;
		margin-left: -32rpx;
		border-bottom: 2rpx solid #E3E8EE;
		background: #FFFFFF;
	}

	.u-tabs-box-down {
		width: 100%;
		left: 0rpx;
		position: fixed;
		top: 568rpx;
		z-index: 999;
		padding: 24rpx 32rpx 0 32rpx;
		box-sizing: border-box;
		min-height: 194rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 14rpx 0rpx rgba(166, 166, 166, 0.5);
		border-radius: 0rpx 0rpx 16rpx 16rpx;

		.u-tabs-box-down-items {
			font-size: 32rpx;
			margin-bottom: 24rpx;
		}

		.u-tabs-box-down-items-btn {
			width: 482rpx;
			height: 72rpx;
			background: #FFFFFF;
			border-radius: 0rpx 0rpx 8rpx 8rpx;
			border-top: 2rpx solid #E7F1FF;
		}

		.u-tabs-box-down-items-act {
			color: #295EFF;
		}
	}

	.userLableDown {
		position: fixed;
		top: 562rpx;
		right: 32rpx;
		width: 482rpx;
		min-height: 72rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(0, 0, 0, 0.1);
		border-radius: 8rpx;
		z-index: 9;

		.userLableDown_btn {
			height: 72rpx;
			background: #FFFFFF;
			border-radius: 0rpx 0rpx 8rpx 8rpx;
			border-top: 2rpx solid #E7F1FF;
			width: 100%;
			color: #295EFF;
			font-size: 32rpx;
			text-align: center;
			line-height: 72rpx;
		}

		.userLableDownBox {
			padding: 24rpx 32rpx 0 32rpx;
			box-sizing: border-box;
		}
	}

	.scrollView_box {
		height: calc(100vh - 638rpx);
	}

	.scrollViewTop {
		position: absolute;
		top: 88rpx;
		width: 688rpx;
		// background: #FFFFFF;
		border-radius: 12rpx;
		margin-left: 32rpx;
		padding: 32rpx 0;
		box-sizing: border-box;
		z-index: 2;
		// margin-top: 24rpx;
	}

	.scrollView {
		height: calc(100vh - 618rpx);
		// background: red;
		position: absolute;
		top: 618rpx;
		width: 688rpx;
		// background: #FFFFFF;
		border-radius: 12rpx;
		margin-left: 32rpx;
		padding: 0 0 0 0;
		margin-top: 32rpx;
		box-sizing: border-box;
		// padding-bottom: 500rpx;
		z-index: 3;

	}

	.endLiveCont {
		width: 100%;
		height: 100vh;
		position: relative;
		padding: 30rpx 0;
		box-sizing: border-box;
		color: #fff;
		overflow: hidden;



		.endLiveCenter {
			width: 100%;
			height: 1624rpx;
			position: absolute;
			left: 0;
			top: 0;
			padding: 30rpx 0;
			box-sizing: border-box;
			overflow: hidden;
			z-index: 2;

		}

		.bjImg {
			width: 100%;
			min-height: 638rpx;
			position: absolute;
			left: 0;
			top: 0;
			background: #fff;
			z-index: 1;

			image {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
			}
		}

		.endLiveCont_back {
			width: 100%;
			height:40rpx;
			float: left;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.endLiveCont_back_lable {
				display: flex;
				align-items: center;
			}

			.lableRight {
				width: 82rpx;
				height: 30rpx;
				background: linear-gradient(148deg, #295EFF 0%, #1319E3 100%);
				border-radius: 16rpx 0rpx 16rpx 0rpx;
				font-size: 24rpx;
				color: #fff;
				text-align: center;
				line-height: 30rpx;
				margin-left: 170rpx;
				position: absolute;
				// top: 15rpx;
			}

			.endLiveCont_back_img {
				width: 50rpx;
				height: 50rpx;
				float: left;
				position: absolute;
				top: 15rpx;
			}

			span {
				font-size: 28rpx;
				margin-left: 60rpx;
				color: #1D2129;
				line-height: 80rpx;
			}

			.useLable {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 172rpx;
				height: 48rpx;
				border-radius: 24rpx;
				margin-right: 32rpx;
				padding: 0 18rpx;
				box-sizing: border-box;
				color: #295EFF;
				font-size: 24rpx;
				line-height: 44rpx;
				position: absolute;
				right: -60rpx;

				image {
					width: 24rpx;
					height: 24rpx;
				}
			}
		}



	}

	.liveUserItems {
		width: 100%;
		min-height: 30rpx;
		// border-bottom: 2rpx solid #AEC0FE;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin-top: 24rpx;

		.liveUserItems_top {
			width: 100%;
			display: flex;
			font-size: 28rpx;
			color: #1D2129;
			padding: 28rpx 32rpx;
			box-sizing: border-box;


			.liveUserItems_top_left {
				width: 76rpx;
				height: 76rpx;

				image {
					width: 76rpx;
					height: 76rpx;
					border-radius: 50%;
				}
			}

			.liveUserItems_top_right {
				margin-left: 18rpx;
				position: relative;
				width: calc(100% - 80rpx);
				display: flex;

				.liveUserItems_top_right_lable {
					width: 80rpx;
					height: 34rpx;
					background: #00C795;
					border-radius: 8rpx;
					padding: 0 16rpx;
					text-align: center;
					line-height: 34rpx;
					margin-left: 16rpx;
					font-size: 24rpx;
					color: #fff;
				}

				.liveUserItems_top_right_lable_act {
					width: 104rpx;
					height: 34rpx;
					background: #8C8C8C;
					border-radius: 8rpx;
					padding: 0 16rpx;
					text-align: center;
					line-height: 34rpx;
					margin-left: 16rpx;
					font-size: 24rpx;
					color: #fff;
				}

				.liveUserItems_top_right_price {
					font-size: 20rpx;
					position: absolute;
					top: 0;
					right: 0;
					width: 96rpx;
					height: 48rpx;
					background: #295FFF;
					border-radius: 46rpx;
					text-align: center;
					line-height: 48rpx;
					color: #fff;
					font-size: 28rpx;
				}

				.liveUserItems_top_right_title {
					max-width: 200rpx;

					.liveUserItems_top_right_title_top,
					.liveUserItems_top_right_title_bottom {
						max-width: 200rpx;
					}

					.liveUserItems_top_right_title_bottom {
						font-size: 20rpx;
						color: #657180;
						margin-top: 4rpx;
					}
				}

				.liveUserItems_top_right_address {
					margin-top: 8rpx;
					font-size: 20rpx;
				}


			}
		}

		.liveUserItems_top_right_time {
			margin-top: 16rpx;
			font-size: 20rpx;
			color: #657180;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0rpx 32rpx 24rpx 32rpx;
			box-sizing: border-box;
			border-bottom: 1rpx solid #E3E8EE;
			.liveUserItems_top_right_time_div{
				display: flex;
			}
			.liveUserItems_top_right_time_ex{
				max-width: 200rpx;
			}

			span {
				margin-left: 32rpx;
			}
		}

		.liveUserItems_bottom_data {
			display: flex;
			align-items: center;
			padding: 24rpx 24rpx 24rpx 15rpx;
			box-sizing: border-box;

			.liveUserItems_bottom_data_items {
				width: 25%;
				display: flex;
				justify-content: flex-start;
				flex-wrap: wrap;
				align-items: flex-start;

				.liveUserItems_bottom_data_items_top {
					font-size: 32rpx;
					color: #1D2129;
					width: 100%;
					text-align: center;
				}

				.liveUserItems_bottom_data_items_bottom {
					font-size: 20rpx;
					margin-top: 8rpx;
					color: #8C8C8C;
					width: 100%;
					text-align: center;
				}
			}
		}

		.liveUserItems_bottom_btn {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			font-size: 24rpx;
			height: 98rpx;
			padding: 0 32rpx;
			box-sizing: border-box;

			.liveUserItems_bottom_btn_one {
				width: 88rpx;
				height: 48rpx;
				background: #FFFFFF;
				border-radius: 8rpx;
				border: 2rpx solid #295EFF;
				text-align: center;
				line-height: 48rpx;
				color: #295EFF;
				margin-right: 20rpx;
			}

			.liveUserItems_bottom_btn_two {
				width: 88rpx;
				height: 48rpx;
				background: #295EFF;
				border-radius: 8rpx;
				border: 2rpx solid #295EFF;
				color: #fff;
				text-align: center;
				line-height: 48rpx;
			}
		}

		.liveUserItems_bottom {
			font-size: 20rpx;
			color: #8C8C8C;
			display: flex;
			align-items: center;
			margin-top: 20rpx;

			.liveUserItems_bottom_lable_title {
				min-width: 80rpx;
			}

			.liveUserItems_bottom_lable_items_cont {
				min-width: calc(100% - 120rpx);
				overflow-x: auto;
				white-space: nowrap;

				.liveUserItems_bottom_lable_items {
					padding: 0 24rpx;
					margin-right: 12rpx;
					height: 34rpx;
					// background: #00DDBA;
					border-radius: 21rpx;
					display: inline-block;
					line-height: 30rpx;
					color: #000;
					font-size: 24rpx;
					min-width: 100rpx;

					span {
						display: inline-block;
					}

				}


			}
		}

		.liveUserItems_cz {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 24rpx 32rpx 0 24rpx;
			box-sizing: border-box;
			border-top: 1rpx solid #E3E8EE;
			margin-top: 24rpx;
			color: #657180;
			font-size: 20rpx;
			position: relative;

			.liveUserItems_cz_left {
				display: flex;
				align-items: center;

				.liveUserItems_cz_items {
					margin-right: 64rpx;

					.liveUserItems_cz_items_top {
						width: 60rpx;
						height: 60rpx;
						margin-left: 10rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.liveUserItems_cz_items_bottom {
						width: 80rpx;
						text-align: center;
						margin-top: 6rpx;
					}

					.color_blue {
						color: #295EFF;
					}
				}
			}

			.liveUserItems_cz_right {
				width: 60rpx;
				height: 60rpx;
				position: absolute;
				right: 0;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.liveUserItems:last-child {
		border: none !important;
	}

	.userData {
		width: 100%;
		height: 302rpx;
		background: #FAFBFF;
		border-radius: 16rpx;
		margin: 20rpx auto;
		padding: 20rpx 24rpx;
		box-sizing: border-box;
		background-image: url(@/static/image/user/userTop.png);
		background-size: cover;

		.userData_top {
			font-size: 24rpx;
			color: #295EFF;
		}

		.userData_cont {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			align-items: center;
			height: 238rpx;
			padding: 0 80rpx;
			box-sizing: border-box;

			.userData_cont_items {
				margin-top: 10rpx;
				width: 180rpx;
				text-align: center;

				.userData_cont_items_top {
					color: #1D2129;
					font-size: 36rpx;
					font-weight: 500;
					// width: 160rpx;
					text-align: center;
				}

				.userData_cont_items_bottom {
					color: #8C8C8C;
					font-size: 20rpx;
					margin-top: 8rpx;
					width: 180rpx;
					text-align: center;
				}
			}

			.noTop {
				margin-top: 0;
			}
		}
	}
</style>